<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>example</title>
<style type="text/css">
     /* CSS样式制作 */
    html,body,div,ul,li{
        margin:0;
        padding:0;
    }
    table{
        width:50%;
        margin: 10px auto;
        border-collapse:collapse;
    }
    th, td{
        border:1px solid #ccc;
        text-align: center;
    }
</style>
</head>
<body>
    <table id="table">
        <thead>
            <tr>
                <th>I&emsp;D</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>13</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>14</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>杨五</td>
                <td>15</td>
                <td><a href="#">删除</a></td>
            </tr>
        </tbody>
    </table>
<script type="text/javascript">
(function(){
    var table = document.getElementById('table');
    var tr = table.tBodies[0].rows;
    var oldColor = '';
    for (var i = 0; i < tr.length; i++) {
        if(i % 2){
            tr[i].style.backgroundColor = "#B4580D";
        }else{
            tr[i].style.backgroundColor = "#896D84";
        }
    };
    for (var i = 0; i < tr.length; i++) {
        tr[i].onmouseover = function(){
            oldColor = this.style.backgroundColor;
            this.style.backgroundColor = "#6cf";
        };
        tr[i].onmouseout = function(){
            this.style.backgroundColor = oldColor;
        };
    };
})();
</script>
</body>
</html>